<template>
  <yd-layout>
    <!-- 头部导航 -->
    <yd-navbar slot="navbar" class="header" height="0.9rem" color="#fff">
      <router-link to="/" slot="left">
          <yd-navbar-back-icon color="#fff"></yd-navbar-back-icon>
          <span style="transform:scale(0.8);color:#fff;line-height:12px">首页</span>
      </router-link>
      <div slot="center" class="headtabs">
        <span class="headtab" @click="tab=0">商品</span>
        <span class="headtab" @click="tab=1">详情</span>
        <span class="headtab" @click="tab=2">评价</span>
        <i class="slider" :style="styleObj"></i>
      </div>
    </yd-navbar>
    
    <!-- /头部导航 -->

    <section>
      <div v-show="tab==0">
        <!-- 图片展示 -->
        <yd-slider :show-pagination="true" :loop="false">
          <yd-slider-item v-for="(item,key) in carousel" :key="key">
            <img :src="item.md">
          </yd-slider-item>
        </yd-slider>
        <!-- /图片展示 -->

        <!-- 标题 -->
        <div class="wrap">
          <p>
            <span class="price">¥<em>{{info.price.toFixed(2)}}</em></span>
            <span style="float:right">已售{{info.sold_count}}件</span>
          </p>
          <p class="title">{{info.title}}</p>
          <p class="subtitle">{{info.subtitle}}</p>
        </div>
        <!-- /标题 -->
        
        <!-- 领卷/规格/地址 -->
        <div>
          <yd-cell-group style="margin:10px 0;">
            <yd-cell-item data-style="custom">
              <span slot="left" class="label">领券</span>
              <span slot="left" class="coupon">满159减10券</span>
              <span slot="left" class="coupon">满299减30券</span>
              <yd-icon slot="right" name="more" size="20px" color="#999"></yd-icon>
            </yd-cell-item>
            <yd-cell-item @click.native="showSpec=true" data-style="custom">
              <span slot="left" class="label">已选</span>
              <span slot="left">{{list[specIndex].spec}}&nbsp;&nbsp;{{checkCount}}件</span>
              <yd-icon slot="right" name="more" size="20px" color="#999"></yd-icon>
            </yd-cell-item>
            <yd-cell-item data-style="custom">
              <span slot="left" class="label">送至</span>
              <div slot="left">商品规格</div>
              <yd-icon slot="right" name="more" size="20px" color="#999"></yd-icon>
            </yd-cell-item>
          </yd-cell-group>

          <!-- 底部弹窗选项 -->
          <!-- 选择规格 -->
          <yd-popup height="70%" v-model="showSpec">
            <span class="close" @click="showSpec=false">
              <yd-icon name="error-outline" size="25px" color="#666"></yd-icon>
            </span>
            <div class="popup-head">
              <img :src="carousel[0].md" alt="">
              <div style="margin-bottom:10px;color:#81838e;">
                <p class="price">¥<em>{{list[specIndex].price.toFixed(2)}}</em></p>
                <p>已售{{list[specIndex].sold_count}}件</p>
              </div>
            </div>
            <div class="popup-content">
              <div class="popup-field">
                <span class="label">已选</span>
                <span>{{list[specIndex].spec}}&nbsp;&nbsp;{{checkCount}}件</span>
              </div>
              <div class="popup-field">
                <span class="label" style="padding-top:2px">规格</span>
                <ul>
                  <li v-for="(item,key) in list" :key="key"
                      class="spec" :class="{active: item.pid==currentPid}"
                      @click="currentPid=item.pid"
                  >
                    {{item.spec}}
                  </li>
                </ul>
              </div>
              <div class="popup-field">
                <span class="label" style="padding-top:4px">数量</span>
                <yd-spinner v-model="checkCount" width="80px" height="25px"></yd-spinner>
              </div>
            </div>
            <div class="popup-foot">
              <span class="left">加入购物车</span>
              <span class="right">立即购买</span>
            </div>
          </yd-popup>
          <!-- /底部弹窗选项 -->
        </div>
        <!-- /领卷/规格/地址 -->

        <div class="promise">
          <p>{{info.promise}}</p>
        </div>
      </div>
      <div class="product-detail" v-show="tab==1">1</div>
      <div class="product-comment" v-show="tab==2">2</div>
    </section>

    <!-- 底部导航 -->
    <div slot="tabbar" class="footnav bgfff">
      <router-link to="#" class="nav-icon">
        <img src="../assets/icon/icon-shop.png" style="width:22px;height:22px">
        <p>进店</p>
      </router-link>
      <div class="nav-icon">
        <yd-icon name="star-outline" size="20px" color="#5C5E69"></yd-icon>
        <p>收藏</p>
      </div>
      <router-link to="#" class="nav-icon">
        <yd-icon name="shopcart-outline" size="20px" color="#5C5E69"></yd-icon>
        <p>购物车</p>
      </router-link>
      
      <div class="nav-txt1"><span>加入购物车</span></div>
      <div class="nav-txt2"><span>立即购买</span></div>

    </div>
    <!-- /底部导航 -->
  </yd-layout>
</template>

<style lang="less" scoped>
.headtabs {
  width: 75%;
  height: 100%;
  display: flex;
  position: relative;
  .headtab {
    flex-grow: 1;
    text-align: center;
    line-height: 0.9rem;
    font-size: 16px;
    color: #fff;
  }
  .slider {
    position: absolute;
    bottom: 0;
    width: 33.33%;
    height: 2px;
    background: #fff;
    transition: all .2s;
  }
}
.footnav {
  display: flex;
  
  .nav-icon {
    padding: 4px 0;
    width: 16%;
    text-align: center;
    p { margin-top: -3px; }
  }
  .nav-txt {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #fff;
  }
  .nav-txt1 {
    .nav-txt;
    background: #ffb03f;
  }
  .nav-txt2 {
    .nav-txt;
    background: #FF5E53;
  }
}
.price {
  color: #fc6248;
  em { font-size: 20px;}
}
.title {
  font-size: 14px;
  font-weight: bold;
  line-height: 18px;
  color: #333;
}
.subtitle {
  padding: .08rem 0;
  color: #1b1b1b;
}
.label {
  margin-right: .3rem;
  color: #81838e;
}
.coupon {
  margin-right: .1rem;
  color: #fc6248;
}
.promise {
  text-align: center;
}

.close {
  position: absolute;
  right: 10px;
  top: 10px;
}
.popup-head {
  display: flex;
  align-items: flex-end;
  border: 1px solid #f0f1f3;
  img {
    margin: 10px;
    width: 100px;
    height: 100px;
    border: 1px solid #f0f1f3;
    border-radius: 3px;
  }
}
.popup-content {
  padding: 15px 10px 60px;
  .popup-field {
    display: flex;
    margin-bottom: .2rem;
    
    .spec {
      margin-bottom: 8px;
      padding: 4px 6px;
      border: 1px solid #ccc;
      &.active { border-color: #f66; }
    }
  }
}
.popup-foot {
  display: flex;
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 45px;
  line-height: 45px;
  text-align: center;
  font-size: 14px;
  color: #fff;
  .left {
    width: 50%;
    background: #ffb03f;
  }
  .right {
    width: 50%;
    background: #FF5E53;
  }
}
</style>

<script>
export default {
  data(){
    return {
      currentPid: this.$route.params.pid,
      tab: 0,
      carousel: [],
      info: null,
      list: [],
      showSpec: false,
      checkCount: 1
    }
  },
  computed: {
    styleObj(){
      return {
        transform: `translate(${this.tab * 100}%,0)`
      }
    },
    specIndex(){
      return this.list.findIndex(item=>{
        return item.pid==this.currentPid;
      })
    }
  },
  watch: {
    showSpec(val){
      if(!val && this.currentPid!=this.$route.params.pid){
        this.$router.push('/product/'+this.currentPid);
      }
    },
    '$route'(to,from){
      this.currentPid = to.params.pid;
      this.loadProduct();
    }
  },
  methods: {
    loadProduct(){
      this.$http.get('http://localhost:3000/product/details',{
        params: {pid: this.currentPid}
      }).then(response=>{
        let { carousel, info, list } = response.body;
        this.carousel = carousel;
        this.info = info[0];
        this.list = list;
      })
    }
  },
  mounted(){
    this.loadProduct();
  }
}
</script>